<template>
  <div class="content-item">
    <form class="condition_query">
      <span class="txt">设备名称</span>
      <el-input v-model="deviceName" size="medium" clearable class="inline-input" placeholder="请输入" />

      <span class="txt">标段</span>
      <el-select
        class="inline-input"
        size="medium"
        v-model="bidSection"
        clearable
        placeholder="请选择"
        @change="getWorkAreaList">
        <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <span class="txt">工区</span>
      <el-select class="inline-input" size="medium" v-model="areaId" clearable placeholder="请选择">
        <el-option v-for="item in workAreaInfo" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <el-button type="primary" size="medium" icon="el-icon-search" style="margin-left:40px" @click="getMonitorList">查询</el-button>
    </form>

    <el-table
      :data="deviceList"
      v-loading="isLoading"
      :header-cell-style="{ background:'#F5F7FA', color: '#636363' }"
      size="mini"
      :max-height="tableHeight"
      style="width: 100%;"
      @cell-mouse-enter="cellMouseEnter"
      @cell-mouse-leave="cellMouseLeave">
      <el-table-column type="index" label="No" :index="indexMethod"></el-table-column>
      <el-table-column prop="deviceCnName" label="设备位置"></el-table-column>
      <el-table-column prop="deviceType" label="设备类型">
        <template slot-scope="{ row }">
          <span>{{ row.deviceType == 1 ? "乐橙云" : "萤石" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="bidName" label="标段"></el-table-column>
      <el-table-column prop="areaName" label="所属工区"></el-table-column>
      <el-table-column prop="deviceKey" label="设备序列号"></el-table-column>
      <el-table-column column-key="sort" label="视频排序">
        <template slot-scope="{ $index, row }">
          <span v-if="row.isShowSort">{{ row.sortCode }}</span>
          <el-input v-model.trim="row.sortCode" size="mini" v-else placeholder="请输入" />
          <el-button
            type="text"
            size="mini"
            v-if="row.isShowSort && row.isShowBtn"
            @click="emitSortInfo($index, row)"
          >编辑</el-button>
          <el-button
            type="text"
            size="mini"
            v-if="!row.isShowSort && row.isShowBtn"
            @click="submitSortInfo($index, row)"
          >确定</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="deviceUrl" label="视频源地址" width="500"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="144"></el-table-column>
      <el-table-column label="操作" width="110">
        <template slot-scope="{ row }">
          <el-button type="text" size="small" @click="modifDeviceInfo(row)">编辑</el-button>
          <el-button type="text" size="small" @click="delDeviceInfo(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData" />
  </div>
</template>

<script>
import Pagination from "../Pagination";
import HttpInterface from "../../../util/httpInterface";
import Sortable from 'sortablejs';
import { mapState, mapActions } from "vuex";
import { messageBox } from "../../../util/utils";

export default {
	name: "DeviceListData",
  components: { Pagination },
  data() {
    return {
      isLoading: false,
      deviceList: [],
      deviceName: "",
      time: "",
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      },
      tableHeight: 300,
      bidSection: "",
      areaId: "",
      workAreaInfo: [],
    };
	},

  computed: {
	  ...mapState(["biaoduanList", "workAreaList"])
  },

  created() {
    this.getTableHeight();
  },

  mounted() {
    let flag = null;
    let _this = this;
    window.onresize = function () {
      flag && clearTimeout(flag);
      flag = setTimeout(() => {
        _this.getTableHeight();
        flag = null;
      }, 300);
    }
    // this.rowDrop();
  },

  beforeDestroy() {
    window.onresize = null;
  },

  methods: {
	  ...mapActions(["selectByBidSection"]),

    indexMethod(index) {
      return index + 1;
    },

    getTableHeight() {
      let tabH = 60;  // 标签导航高度 + 距离top值
      let select = 70;  // 筛选栏高度 + 上下margin
      let tableTitle = 37;  // 表格头部高度
      let pageH = 62;  // 页码高度 + 上下margin
      let h = window.innerHeight;
      this.tableHeight = h - tabH - select - tableTitle - pageH;
    },

    // 行拖拽
    rowDrop() {
      let tbody = document.querySelector('.el-table__body-wrapper tbody');
      let _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          let currRow = _this.deviceList.splice(oldIndex, 1)[0];
          let newRow = _this.deviceList.splice(newIndex, 1)[0];
          let currRowCode = currRow.sortCode;
          let newRowCode = newRow.sortCode;
          let cameraDevice = {
            sortCamera: []
          };
          cameraDevice.sortCamera[0] = currRow;
          cameraDevice.sortCamera[1] = newRow;
          cameraDevice.sortCamera[0].sortCode = newRowCode;
          cameraDevice.sortCamera[1].sortCode = currRowCode;

          HttpInterface.requestPost(_this, HttpInterface.URL_UPDATE_SORT_CAMERA_DEVICE, cameraDevice, function (response) {
            var data = response.data;
            if (data.success) {
              _this.deviceList = [];
              _this.getMonitorList();
            }
          }, null, false)
        }
      })
    },

    pageNumData (page) {
      this.pageData.pageNum = Number(page);
      this.getMonitorList();
    },

    pageSizeData (page) {
      this.pageData.pageSize = Number(page);
      this.getMonitorList();
    },

    getWorkAreaList() {
      let _this = this;
      this.selectByBidSection({
        bidSection: this.bidSection,
        fn: function (data) {
          _this.workAreaInfo = data;
        }
      })
    },

    getMonitorList() {
      this.isLoading = true;
      let _this = this;
      let { deviceName, bidSection, pageData, workAreaList, biaoduanList, areaId } = this;
      var params = {
        page: pageData.pageNum,
        size: pageData.pageSize
      }
      if (deviceName) params.deviceCnName = deviceName;
      if (bidSection) params.bidSection = bidSection;
      if (areaId) params.areaId = areaId;

      HttpInterface.requestGet(this, HttpInterface.UEL_FIND_PAGE, params, function (response) {
        var data = response.data;
        if (data.success) {
          let { rows, total } = data.other;
          rows.forEach(item => {
            item.isShowSort = true;
            item.isShowBtn = false;

            biaoduanList.forEach(row => {
              if (item.bidSection == row.id) item.bidName = row.name;
            })

            workAreaList.forEach(key => {
              if (item.areaId == key.id) item.areaName = key.name;
            })
          })

          _this.deviceList = rows;
          _this.pageData.total = total;
        } else {
          _this.errorMessage(data.msg);
          _this.deviceList = [];
          _this.pageData.total = 0;
        }
        _this.isLoading = false;
      }, function(err) {
        _this.isLoading = false;
      })
    },

    modifDeviceInfo (row) {
      this.$emit("emitInfo", row.id);
    },

    delDeviceInfo(id) {
      let _this = this;
      messageBox(() => {
        let parmas = { id };
        HttpInterface.requestGet(this, HttpInterface.URL_DELETE_CAMERA_DEVICE, parmas, function (response) {
          var data = response.data;
          _this.getMonitorList();
          _this.successMessage(data.msg);
        }, null)
      })
    },

    cellMouseEnter(row, column) {
      if (column.columnKey == "sort") {
        this.deviceList.forEach(item => {
          if (item.id == row.id) item.isShowBtn = true;
        })
      }
    },

    cellMouseLeave(row, column) {
      if (column.columnKey == "sort") {
        this.deviceList.forEach(item => {
          if (item.id == row.id) {
            if (item.isShowSort) item.isShowBtn = false;
          }
        })
      }
    },

    emitSortInfo(index, row) {
      this.deviceList.forEach((item, i) => {
        if (i == index) {
          item.isShowSort = false;
          item.isShowBtn = true;
        }
      })
    },

    submitSortInfo(index, row) {
	    let { deviceList } = this;
      let parmas = row;
      HttpInterface.requestPost(this, HttpInterface.URL_UPDATE_CAMERA_DEVICE, parmas, (res) => {
        var { success } = res.data;
        if (success) {
          deviceList.forEach((item, i) => {
            if (i == index) {
              item.isShowSort = true;
              item.isShowBtn = false;
            }
          })
          this.getMonitorList();
        }
      }, null, false)
    }
  }
};
</script>

<style  scoped>
.condition_query{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.txt{
  margin-right: 10px;
  font-size: 14px;
}

.inline-input{
  width: 150px;
  margin-right: 22px;
}

.el-table >>> td:not(:last-child) .cell{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-table >>> td .cell .el-input--mini{
  width: 70px;
}

.el-table >>> td .cell .el-button--mini {
  padding: 0px;
}

.el-table >>> td .cell .el-input--mini .el-input__inner{
  padding: 0 10px;
}
</style>
